<template>
  <div>
    <page-header-wrapper>

      <a-card
        style="margin-top: 24px"
        :bordered="false"
        title="projects List">

        <div slot="extra">
          <a-input-search aria-placeholder="search..." style="margin-left: 16px; width: 272px;" />
        </div>


        <a-list size="large"
                :pagination="false"
        >
          <a-list-item :key="index" v-for="(item, index) in data">
            <a-list-item-meta>
              <a-avatar slot="avatar" size="large" shape="square" :src="item.cover"/>
              <a slot="title">{{ item.name }}</a>
            </a-list-item-meta>

            <div slot="actions">
              <router-link :to="{ path: `/project/edit/${item.id}` }">
                <a>编辑</a>
              </router-link>
            </div>
            <div slot="actions">
              <a @click="del(item.id)">删除</a>
            </div>

            <div class="list-content">
              <div class="list-content-item" style="padding-right: 40px;">
                <span>项目分类</span>
                <p style="padding-top: 5px;">{{ item.category.name }}</p>
              </div>

              <div class="list-content-item">
                <span>Owner</span>
                <p>{{ item.username }}</p>
              </div>
              <div class="list-content-item">
                <span>项目发布时间</span>
                <p>{{ item.createTime }}</p>
              </div>
              <div class="list-content-item">
                <a-popover title="技能标签" trigger="hover">
                  <template #content>
                    <a-tag color="red" v-for="tagItems in item.tags" >{{ tagItems }}</a-tag>
<!--                    <a-tag color="red">MySql</a-tag>-->
<!--                    <a-tag color="red">Redis</a-tag>-->
<!--                    <a-tag color="red">Spring</a-tag>-->
<!--                    <a-tag color="red">SpringCloud</a-tag>-->
                  </template>
<!--                    <a-tag color="red">SpringBoot</a-tag>-->
                  <a-button>查看项目标签</a-button>
                </a-popover>
              </div>
            </div>
          </a-list-item>
        </a-list>
      </a-card>

      <div style="padding-top: 15px; float: right">
        <a-pagination
          show-size-changer
          show-quick-jumper
          :pageSizeOptions="pages.pageSizeOptions"
          :default-current="pages.defaultCurrent"
          :total="pages.total"
          :pageSize="pages.pageSize"
          @change="getProjects"
          @showSizeChange="onSizeChange"
        />
      </div>

    </page-header-wrapper>
  </div>
</template>

<script>
import project from "@/api/project";

const data = []
// data.push({
//   title: 'impression',
//   cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
//   // description: '那是一种内在的东西， 他们到达不了，也无法触及的',
//   // description: '个人介绍在线网站',
//   category: '后端',
//   owner: 'Bear',
//   startAt: '2018-07-26 22:44',
//   progress: {
//     value: 90
//   }
// })
// data.push({
//   title: '谷粒商城',
//   cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
//   // description: '商城项目',
//   category: '后端',
//   owner: 'Bear',
//   startAt: '2018-07-26 22:44',
//   progress: {
//     value: 54
//   }
// })
// data.push({
//   title: 'XXX',
//   cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
//   // description: '生命就像一盒巧克力，结果往往出人意料',
//   category: '后端',
//   owner: 'Bear',
//   startAt: '2018-07-26 22:44',
//   progress: {
//     value: 66
//   }
// })

import TaskForm from '../list/modules/TaskForm'
import Info from '../list/components/Info'
export default {

  components: {
    TaskForm,
    Info
  },
  data() {
    return {
      data,
      status: 'all',
      pages: {
        defaultCurrent: 1, // 默认当前页数
        total: 0, // 总数，必须先有
        pageSize: 5,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15", "20"],
        defaultPageSize: 5,
      },
    }
  },
  created() {

    this.getProjects();
  },
  methods: {
    del(projectId) {
      project.deleteProjectById(projectId).then(responses => {
        this.$message.success('deleted', 3);
        this.getProjects();
      })
    },
    onSizeChange(current, pageSize) {
      this.pages.defaultCurrent = 1
      this.pages.pageSize = pageSize
      this.getProjects()
    },
    change(current, size) {
      this.pages.defaultCurrent = current;
      this.pages.pageSize = size;
      this.getProjects();
    },
    getProjects(currentPage = 1) {
      this.pages.defaultCurrent = currentPage;
      project.getProjectsByPage(this.pages.defaultCurrent, this.pages.pageSize).then(response => {

        this.pages.total = response.data.total;
        this.data = response.data.content;
        console.log('project信息：', response.data.content);
        console.log('project count: ', response.data.total);
      })
    }
  }
}
</script>

<style lang="less" scoped>
.ant-avatar-lg {
  width: 48px;
  height: 48px;
  line-height: 48px;
}

.list-content-item {
  color: rgba(0, 0, 0, .45);
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-left: 40px;
  span {
    line-height: 20px;
  }
  p {
    margin-top: 4px;
    margin-bottom: 0;
    line-height: 22px;
  }
}
</style>